$main_color=#234590

@import "./player.styl"

.meet{
  background-color #000
}
.local_player {
  width: 90vw
  height: calc(100vh - 90px)
}
.banner {
  $height=90px
  display flex
  z-index 1000
  justify-content: center
  justify-items center
  align-content: center
  align-items center
  position: fixed
  bottom: 0
  width: 100vw
  height: $height
  border-top 1px solid #666
  .test-button{
    position: absolute;
    left 20px
    top 50%
    transform translateY(-50%)
    width 15em
    height: 2em;
    line-height 2em;
    text-align center;
    background-color: #666;
    color white
    font-weight bold
    cursor pointer
    border-radius 0.4em
  }
  .share-screen-button{
    position: absolute
    right: 20px
    padding: 0 20px 0 50px
    height: $height
    line-height: $height;
    font-size 1.2em
    color: $main_color;
    cursor pointer
    &:before{
      position: absolute
      left: 15px
      top: 50%
      content: ""
      transform translateY(-55%)
      display: block
      width: 30px
      height: 30px
      background-repeat no-repeat;
      background-position center
      background-size contain
      background-image url("~@/assets/ShareScreen.svg")
    }
    &:hover{
      background-color: lightgray;
    }
  }
}
.notify{
  display flex
  justify-items center
  justify-content space-around
  align-items center
  position fixed
  top 0
  right 0
  background-color #fff
  border-radius  0 0 0 10px
  width 300px
  height 50px
  z-index 100
}
.local-camera-player{
  position: relative;
  width 100px
  height 50px
  .voice-dot-local{
    z-index 1
    position: absolute;
    left: 48.7px;
    top: 70%;
    transform translateY(-50%);
  }
  img{
    width 30%
    height 100%
    margin-left 30px
  }
  video{
    width 100%
    height 100%
    object-fit contain
    background-color: #fff;
    transform rotateY(180deg)
  }
  &:after{
    display block
    content "You"
    position: absolute;
    left -19px
    bottom 19px
    width 2em
    height 1em
    color $main_color
  }
}
.remote-user{
  color $main_color
  cursor pointer
  padding 5px
  border-radius 5px
  transition all 0.2s linear
  position: relative;
  &:hover {
    background-color: #eee;
    &:after{
      content "show user list"
      position: absolute;
      bottom: 0;
      left: 50%
      transform translate(-50%, 180%)
      white-space nowrap
      background-color: rgba(30,30,30,0.6);
      color white;
      padding 5px
      border-radius 5px
    }
  }
}
.user-list{
  z-index 10
  position: fixed;
  right 0
  top 50%
  transform translateY(-50%)
  background-color: #fff;
  padding 10px 14px
  border-radius 10px 0 0 10px
  p{
    text-indent: 10px
    color: #999
  }
  ul{
    margin 0
    padding 0
    li{
      position: relative;
      margin 4px
      padding 4px 80px 4px 28px
      list-style none
      cursor pointer
      border-radius 8px
      color $main_color
      &:hover{
        background-color: #eee;
      }
      &:before{
        position: absolute;
        left 6px
        top 50%
        transform translateY(-50%)
        display block
        content ""
        width 16px
        height 16px
        background center / contain  no-repeat url("~@/assets/yonghu.svg")
      }
      .audio-dot-local{
        position: absolute;
        right: 45px
        top 50%
        transform translateY(-50%)
      }
      .pin-button-local{
        position absolute;
        right 10px
        top 50%
        transform translateY(-50%)
      }
    }
  }
}

